<template>
    <div class="shop">
        <div class="top">
            <div class="left">
                <h1>{{$route.meta.title}}</h1>
                <div class="search">
                    <el-select v-model="value">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input placeholder="关键词" v-model="searchValue"></el-input>
                    <el-button @click="search">查询</el-button>
                </div>
            </div>
            <div class="right">
                <el-button type="primary" @click="addShop">添加商品</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="receiverName" label="信息">
                <template slot-scope="scope">
                    <p>{{scope.row.name}}</p>
                    <p>{{scope.row.subtitle}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span class="state">{{scope.row.status==1?'在售':'已下架'}}</span>
                    <el-button type="warning" size="mini" @click="changeStatus(scope.row.id,scope.row.status)">{{scope.row.status==1?'下架':'上架'}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" href="#" @click="look(scope.row.id)">查看</el-button>
                    <el-button size="mini" @click="update(scope.row.id)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 -->
        <!-- 分页 -->
        <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 分页 -->
    </div>
</template>

<script>
import { shop, search } from "@/utils/api";
import { changeStatus } from "@/utils/api";
export default {
    data() {
        return {
            tableData: [],
            options: [
                {
                    value: "id",
                    label: "按商品ID查询",
                },
                {
                    value: "name",
                    label: "按商品名称查询",
                },
            ],
            value: "id",
            pageNum: 1,
            searchValue: "",
            total: 0,
            pageSize: 10,
        };
    },
    methods: {
        getData() {
            shop(this.pageNum).then((res) => {
                if (res.data.status == 0) {
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;
                }
            });
        },
        addShop() {
            this.$router.push("/shop/add");
        },
        changeStatus(id, status) {
            var text = "";
            if (status == 1) {
                status = 2;
                text = "确认下架此商品？";
            } else {
                status = 1;
                text = "确认上架此商品？";
            }
            let flag = confirm(text);
            if (flag) {
                changeStatus({ id, status }).then((res) => {
                    if (res.data.status == 0) {
                        alert(res.data.data);
                        this.getData();
                    } else if (res.data.status == 10) {
                        this.$router.push("/login");
                    }
                });
            }
        },
        handleCurrentChange(page) {
            this.pageNum = page;
            this.getData();
        },
        search() {
            var searchKey = "";
            var flag = false;
            if (this.value == "id") {
                if (/^[\u4e00-\u9fa5]/.test(this.searchValue)) {
                    flag = true;
                }
                searchKey = "productId";
            } else if (this.value == "name") {
                searchKey = "productName";
            }
            if (flag) {
                alert("你是个麻瓜吗？id不能输入中文！！！！");
                return;
            }
            search(this.pageNum, this.searchValue, searchKey).then((res) => {
                if (res.data.status == 0) {
                    this.tableData = res.data.data.list;
                    this.total = res.data.data.total;
                }
            });
        },
        look(id) {
            this.$router.push("/shop/detail?&id=" + id);
        },
        update(id) {
            this.$router.push("/shop/edit?&id=" + id);
        },
    },
    created() {
        this.getData();
    },
};
</script>

<style lang="scss" scoped>
h1 {
    font-weight: normal;
}
.search {
    display: flex;
    margin: 20px 0;
    .el-select,
    .el-input {
        flex-basis: 40%;
        margin: 0 10px;
    }
}
.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}
.state {
    display: inline-block;
    width: 60px;
}
.shop {
    height: 100%;
}
.el-table {
    height: calc(100% - 200px);
    overflow: auto;
}
.el-pagination {
    text-align: center;
}
</style>